// 用例组件
<template>
  <div class="use-case-box" v-show="list.length">
    <div v-for="(item, index) in list" :key="index" class="use-case-item">
      <div
        class="use-case-circle"
        :style="{ backgroundColor: item.color || '#2ea9ff' }"
      ></div>
      <div class="use-case-text">{{ item.name }}</div>
      <el-checkbox
        v-model="item.check"
        @change="handleChange(item)"
      ></el-checkbox>
    </div>
  </div>
</template>

<script>
import infoData from '@p/mock/info.json'
import useCase from '@p/mock/useCase.json'
import cqzcq from '@p/geojson/cqzcq.json'
import { createPopup, addLegend } from '@u/map'
import D2C from 'd2c'
export default {
  name: 'use-case',
  inject: ['map'],
  props: {
    // 当前选中的menu
    menu: {
      type: Object,
      default() {
        return null
      },
    },
    'map-click': {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      list: [],
      popup: null,
    }
  },
  mounted() {
    // let keys = Object.keys(infoData)
    // let arr = []
    // keys.forEach((item) => {
    //   infoData[item].useCase.forEach((i) => {
    //     arr.push(i)
    //   })
    // })
    // console.log(arr)
    // let s = {}
    // arr.forEach((item) => {
    //   s[item.geojson] = {
    //     name: item.name,
    //     data: '',
    //   }
    // })
    // console.log(JSON.stringify(s))
    this.initCase()
  },
  methods: {
    initCase() {
      let list = JSON.parse(JSON.stringify(infoData[this.menu.id] || {}))
      let useCase = list.useCase || []

      useCase.forEach((item) => {
        if (!item.check) {
          item.check = false
        }
      })

      this.list = useCase

      // 添加useCase中初始选中的数据
      this.list.forEach((item) => {
        if (item.check) {
          this.handleChange(item)
        }
      })
    },

    // 销毁组件，清除相关资源
    destroyedRemove() {
      // 销毁前，移除已有styleJson
      this.list.forEach((item) => {
        // 获取item.geojson
        let style = this.map.getStyle(item.geojson + '') // 处理为字符串
        if (style) {
          this.map.removeStyle(item.geojson)
        }

        // 请求携带的legendControl
        if (item.legendControl) {
          item.legendControl.onRemove(this.map)
          item.legendControl = null
        }
      })
      // 销毁前，移除点击查询
      if (this.mapClick) {
        this.map.off('click', this.mapClickEvent)
      }
      if (this.popup) {
        this.popup.remove()
      }
      // 清除绘制的渐变图层和资源
      this.removeCenterGeo()
    },
    // 显示地图数据
    showGeojson(geo, item) {
      if (!geo.style) return false
      // 直接添加，添加成功设置该style的基本信息
      this.map.addStyle(geo.id, geo.style, {
        onload: (res) => {
          // 雪碧图
          this.map.addSprite(res.sprite, () => {
            console.log('添加雪碧图成功')
          })
          console.log(res)
          // 将对应的图例保存在item.legendControl
          item.legendControl = addLegend(this.map, res.layers)
          // 添加成功
          // console.log(res)
          // this.map.flyTo({
          //   center: res.center,
          //   zoom: res.zoom,
          // })
        },
      })
    },

    // checkbox选择事件
    handleChange(item) {
      // 选中指标，显示对应的地图数据
      if (item.check) {
        // 选中的是 各中心城区指标，单独处理（用例处理+地图渐变效果处理）
        if (item.name === '各中心城区指标') {
          this.addCenterGeo(item)
          return false
        }

        // 添加地图点击事件，显示属性查询信息
        if (this.mapClick) {
          this.map.on('click', this.mapClickEvent)
        }

        // 不是 '各中心城区指标'，绘制各种的stylejson，并通过legendControl自动判断添加图例
        let geojson = useCase[item.geojson]
        let geo = {
          id: item.geojson, // 用作图层的数据源id和图层id
          style: geojson.data,
        }
        // 在地图显示该数据
        this.showGeojson(geo, item)
      } else {
        if (item.name === '各中心城区指标') {
          // '各中心城区指标' 取消，移除图层、数据源和legendControl
          this.removeCenterGeo(item)
          if (item.legendControl) {
            item.legendControl.onRemove(this.map)
            item.legendControl = null
          }
          return false
        }

        // 非'各中心城区指标'，移除所点击stylejson数据
        this.map.removeStyle(item.geojson)

        // 移除popup
        if (this.popup) {
          this.popup.remove()
        }
        // 移除legendControl
        if (item.legendControl) {
          item.legendControl.onRemove(this.map)
          item.legendControl = null
        }
      }
    },

    // 各中心城区指标，单独处理
    addCenterGeo(item) {
      let {
        data: { key = '', value = [] },
      } = useCase[item.geojson]
      if (!key && !value.length) return false
      // 获取value中最大的值，并进行分段处理，作为表达式
      let maxArr = value.map((item) => parseInt(item.data))
      let maxData = Math.max(...maxArr)
      let cases = 5 // 分段大小

      let casesArr = []
      let casesSize = parseInt(maxData / cases)
      for (let i = 0; i <= cases; i++) {
        let res = i * casesSize
        casesArr.push(res)
      }

      let expression = ['step', ['get', key]]
      // 将指标名称及数据拼接到主城区geojson上
      cqzcq.features.forEach((item) => {
        let res = value.find((i) => i.id === item.properties.id)
        if (res) {
          item.properties[key] = parseFloat(res.data)
        }
      })

      // 绘制表达式
      expression.push('rgba(0,0,0,0)')
      casesArr.forEach((item) => {
        var green = (item / maxData) * 255
        var color = 'rgba(' + 120 + ', ' + parseInt(green) + ', ' + 12 + ', 1)'
        expression.push(item, color)
      })

      this.map.addSource('xxxx', {
        type: 'geojson',
        data: cqzcq,
      })
      // 添加主城区，指标图层
      this.map.addLayer({
        id: 'xxxx',
        type: 'fill',
        source: 'xxxx',
        paint: {
          'fill-color': expression,
          'fill-outline-color': '#2071A7',
        },
      })

      // 添加图例
      setTimeout(() => {
        item.legendControl = addLegend(this.map, 'xxxx')
      }, 100)
    },

    removeCenterGeo() {
      if (this.map.getLayer('xxxx')) {
        this.map.removeLayer('xxxx')
        this.map.removeSource('xxxx')
      }
    },

    // 添加地图点击事件
    mapClickEvent(e) {
      const result = this.map.queryRenderedFeatures(e.point)
      console.log(result)
      // 创建popup
      if (!this.popup) {
        this.popup = new D2C.Popup({ closeOnClick: false })
      }
      const html = createPopup(result.slice(0, 1))
      this.popup.setLngLat(e.lngLat).setHTML(html).addTo(this.map)
    },
  },
  beforeDestroy() {
    this.destroyedRemove()
  },
}
</script>

<style lang="scss">
.use-case-box {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 164px;
  max-height: 176px;
  background: #ffffff;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  padding: 0 9px;
  overflow-y: auto;
  .use-case-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    .use-case-circle {
      width: 8px;
      height: 8px;
      background: #2ea9ff;
      border-radius: 50%;
      margin-right: 5px;
    }
    .use-case-text {
      width: calc(100% - 13px - 16px - 5px);
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      margin-right: 5px;
      color: #848a9f;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}
</style>
